<template>
  <a-modal
    title="选择发票"
    :width="1024"
    :visible="visible"
    :confirmLoading="loading"
    @ok="modalOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="发票">
                <a-input v-model="queryParam.search" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        :columns="columns"
        :rowSelection="rowSelection"
        :data="loadData"
        :row-key="(record)=>record.id"
        :showPagination="true"
      >
        <span slot="submitState" slot-scope="text, record">
          <a-dropdown>
            <a-tag :color="(text === '待审核') ? 'orange' : (text === '审核通过') ? 'green' : 'gray'">
              {{ text }}
            </a-tag>
            <a-menu slot="overlay">
              <a-menu-item key="待审核">
                <a href="javascript:;" @click="updateState(record, '待审核')">待审核</a>
              </a-menu-item>
              <a-menu-item key="已完成">
                <a href="javascript:;" @click="updateState(record, '审核通过')">审核通过</a>
              </a-menu-item>
              <a-menu-item key="待作废">
                <a href="javascript:;" @click="updateState(record, '作废')">作废</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
        <span slot="code" slot-scope="text">
          <img :src="text" style="width:80px;height:80px;" />
        </span>
      </s-table>
    </a-card>
  </a-modal>
</template>

<script>
import { getRecordLists, putRecord } from '@/api/manage'
import { STable } from '@/components'
export default {
  name: 'SelectRecord',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    }
    // model: {
    //   type: Object,
    //   default: () => null
    // }
  },
  data () {
    return {
      nowSelect: {},
      model: {},
      rowSelection: {
        type: 'radio',
        onSelect: (record, selected, selectedRows, nativeEvent) => {
          this.onSelect(record, selected, selectedRows, nativeEvent)
        }
      },
      detailOnlyVisible: false,
      bandTickVisible: false,
      detailVisible: false,
      deliveryVisible: false,
      queryParam: {},
      departmentList: [],
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '发票流水号',
          dataIndex: 'fpqqlsh'
        },
        {
          title: '发票抬头',
          dataIndex: 'buyerName'
        },
        {
          title: '买方银行账号',
          dataIndex: 'account'
        },
        {
          title: '货物名称',
          dataIndex: 'goodsName'
        },
        {
          title: '总额',
          dataIndex: 'totalPrice'
        },
        {
          title: '发票状态',
          dataIndex: 'submitState',
          scopedSlots: { customRender: 'submitState' }
        },
        {
          title: '开票人',
          dataIndex: 'member.name'
        }
      ],
      loadData: parameter => {
        // 不要在这里修改分页大小，STable已经写死默认每一页10条
        const cParameter = { pageSize: parameter.pageSize, pageNum: parameter.pageNo }
        const requestParameter = Object.assign({}, cParameter, this.queryParam)
        return getRecordLists(requestParameter).then(res => {
          this.departmentList = res.data
          res.data.forEach((item) => {
            item.addtime = this.Format(item.addtime, 'yyyy-MM-dd hh:mm:ss')
          })
          return {
            data: res.data,
            totalCount: parseInt(res.headers['x-count']),
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize
          }
        })
      }
    }
  },
  components: {
    STable
  },
  created () {
    // this.init()
  },
  methods: {
    onSelect (record, selected, selectedRows, nativeEvent) {
      this.nowSelect = record
    },
    toDetailOnly (record) {
      this.model = record
      this.detailOnlyVisible = true
    },
    toDeliveryDetail (record) {
      this.model = record
      this.deliveryVisible = true
    },
    toBandTicket (record) {
      this.model = record
      this.bandTickVisible = true
    },
    updateState (record, state) {
      const tempState = { ...record }
      tempState.submitState = state
      putRecord(tempState.id, tempState).then(res => {
        this.$refs.table.refresh(true)
      })
    },
    modalOk () {
      this.$emit('OnSelect', this.nowSelect)
      // this.model = {}
      // this.detailVisible = false
      // this.bandTickVisible = false
      // this.$refs.table.refresh(false)
    },
    init () {
      getRecordLists({ pageSize: this.pageSize, pageNum: this.pageNo }).then(res => {
        this.departmentList = res.data
        console.log(this.departmentList)
      })
    },
    toAdd () {
      this.model = {}
      this.detailVisible = true
    },
    toDetail (record) {
      this.model = record
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
